<template>
  <view class="refund-detail">
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-else-if="refund" class="detail-content">
      <!-- 退款状态 -->
      <view class="status-section">
        <view class="status-icon" :class="getStatusClass(refund.refundStatus)">
          <text class="iconfont" :class="getStatusIcon(refund.refundStatus)"></text>
        </view>
        <text class="status-text">{{ getStatusText(refund.refundStatus) }}</text>
        <text class="status-desc">{{ getStatusDesc(refund.refundStatus) }}</text>
      </view>
      
      <!-- 退款金额 -->
      <view class="amount-section">
        <text class="amount-label">退款金额</text>
        <view class="amount-value">
          <text class="currency">¥</text>
          <text class="price">{{ refund.refundAmount }}</text>
        </view>
      </view>
      
      <!-- 退款信息 -->
      <view class="info-section">
        <view class="info-item">
          <text class="label">订单号</text>
          <text class="value">{{ refund.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">退款单号</text>
          <text class="value">{{ refund.refundNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">退款原因</text>
          <text class="value">{{ refund.refundReason }}</text>
        </view>
        <view class="info-item">
          <text class="label">申请时间</text>
          <text class="value">{{ formatTime(refund.createTime) }}</text>
        </view>
        <view v-if="refund.refundTime" class="info-item">
          <text class="label">退款时间</text>
          <text class="value">{{ formatTime(refund.refundTime) }}</text>
        </view>
        <view v-if="refund.wxRefundId" class="info-item">
          <text class="label">微信退款号</text>
          <text class="value">{{ refund.wxRefundId }}</text>
        </view>
        <view v-if="refund.failReason" class="info-item">
          <text class="label">失败原因</text>
          <text class="value error">{{ refund.failReason }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-section">
        <button v-if="refund.refundStatus === 0" class="btn btn-primary" @click="cancelRefund">
          撤销退款
        </button>
        <button class="btn btn-default" @click="goToOrder">
          查看订单
        </button>
      </view>
    </view>
    
    <view v-else class="error">
      <text>退款记录不存在</text>
    </view>
  </view>
</template>

<script>
import { payService } from '@/services/pay.js'

export default {
  data() {
    return {
      refundId: '',
      refund: null,
      loading: true
    }
  },
  
  onLoad(options) {
    this.refundId = options.refundId
    this.loadDetail()
  },
  
  methods: {
    async loadDetail() {
      try {
        const res = await payService.getRefundRecordDetail(this.refundId)
        
        if (res.success) {
          this.refund = res.data
        } else {
          uni.showToast({
            title: res.message || '获取退款记录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取退款记录详情失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    getStatusClass(status) {
      const statusMap = {
        0: 'processing',
        1: 'success',
        2: 'failed',
        3: 'cancelled'
      }
      return statusMap[status] || 'unknown'
    },
    
    getStatusIcon(status) {
      const iconMap = {
        0: 'icon-clock',
        1: 'icon-check',
        2: 'icon-close',
        3: 'icon-close'
      }
      return iconMap[status] || 'icon-question'
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '处理中',
        1: '退款成功',
        2: '退款失败',
        3: '已撤销'
      }
      return statusMap[status] || '未知状态'
    },
    
    getStatusDesc(status) {
      const descMap = {
        0: '退款申请已提交，正在处理中',
        1: '退款已完成',
        2: '退款未成功',
        3: '退款已撤销'
      }
      return descMap[status] || ''
    },
    
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
    },
    
    cancelRefund() {
      if (!this.refund) return
      
      uni.showModal({
        title: '确认撤销',
        content: '确定要撤销退款申请吗？',
        success: async (res) => {
          if (res.confirm) {
            await this.doCancelRefund()
          }
        }
      })
    },
    
    async doCancelRefund() {
      uni.showLoading({
        title: '撤销中...'
      })
      
      try {
        const res = await payService.cancelRefund(this.refundId)
        
        if (res.success) {
          uni.hideLoading()
          uni.showToast({
            title: '撤销成功',
            icon: 'success'
          })
          
          // 重新加载详情
          this.loadDetail()
        } else {
          uni.hideLoading()
          uni.showToast({
            title: res.message || '撤销失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('撤销退款失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    },
    
    goToOrder() {
      if (!this.refund) return
      
      uni.navigateTo({
        url: `/pages/order/detail?orderId=${this.refund.orderId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .loading, .error {
    text-align: center;
    padding: 200rpx 0;
    color: #999;
    font-size: 28rpx;
  }
  
  .detail-content {
    .status-section {
      background-color: #fff;
      padding: 60rpx 40rpx;
      text-align: center;
      margin-bottom: 20rpx;
      
      .status-icon {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin: 0 auto 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 60rpx;
          color: #fff;
        }
        
        &.processing {
          background-color: #1890ff;
        }
        
        &.success {
          background-color: #52c41a;
        }
        
        &.failed {
          background-color: #ff4d4f;
        }
        
        &.cancelled {
          background-color: #999;
        }
      }
      
      .status-text {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .status-desc {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .amount-section {
      background-color: #fff;
      padding: 40rpx;
      margin-bottom: 20rpx;
      
      .amount-label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
      }
      
      .amount-value {
        .currency {
          font-size: 32rpx;
          color: #ff4d4f;
        }
        
        .price {
          font-size: 48rpx;
          font-weight: bold;
          color: #ff4d4f;
        }
      }
    }
    
    .info-section {
      background-color: #fff;
      padding: 0 40rpx;
      margin-bottom: 20rpx;
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 28rpx;
          color: #666;
        }
        
        .value {
          font-size: 28rpx;
          color: #333;
          text-align: right;
          max-width: 400rpx;
          word-break: break-all;
          
          &.error {
            color: #ff4d4f;
          }
        }
      }
    }
    
    .action-section {
      padding: 40rpx;
      
      .btn {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        border: none;
        
        &.btn-primary {
          background-color: #ff4d4f;
          color: #fff;
        }
        
        &.btn-default {
          background-color: #fff;
          color: #333;
          border: 1rpx solid #ddd;
        }
      }
    }
  }
}
</style> 